<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body id="body">
    <div v-for="val,index in list">
        <div v-if="val.status">
            <div><img width="200" height="200" v-bind:src="val.imges" alt=""></div>
            <div>{{val.text}}</div>
            <div>{{val.price}}￥</div>
            <div>库存:{{val.status}}</div>
            <div><input type="text" v-model="val.quantity"><input type="button" value="购买"
                    @click="getchange(index,val.quantity)"></div>
        </div>
    </div>
    <div><input type="button" value="新增" @click="updata(list)"><input type="button" value=删除 @click="delet(list)"></div>

    </div>

</body>
<script>

    const app = Vue.createApp({
        data: function () {
            return {
                list: [
                    {
                        imges: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/210475/25/11888/111868/61b05bd3E20fc84b2/e3d98f6e4399d962.jpg!cc_320x320.webp',
                        text: '拜亚动力/拜雅 (beyerdynamic) DT 900 PRO X 头戴式监听录音室开放式专用HiFi耳机',
                        price: 200,
                        quantity: null,
                        status: 100
                    },
                    {
                        imges: 'https://img13.360buyimg.com/n7/jfs/t1/135403/21/31738/70720/641d7ff7F4556f856/75e467e8af84a094.jpg',
                        text: '一加Ace2V新机上市！天玑9000移动平台，1.5K灵犀触控直屏，晒单赢30元京豆，以旧换新至高补贴600元！点击购买',
                        price: 2299,
                        quantity: null,
                        status: 100
                    },
                    {
                        imges: 'https://img13.360buyimg.com/n7/jfs/t1/70419/16/16878/18502/638df5eeEead825ef/b6f20262ae9782e2.jpg',
                        text: '【春日添新意】指定iPhone14到手低至5399元！！！点击',
                        price: 5399,
                        quantity: null,
                        status: 100
                    }
                ],


            }
        },

        methods: {
            getchange: function (id, data) {

                this.list[id].status -= data
                //   data = this.list[id].status-data
                //     console.log(this.list);
            },
            delet: function (list) {
                // list[list.length - 1].status = 0
                list.pop()
            },
            updata: function (list) {
                list.push(list[list.length - 1])
            }
        }
    })

    app.mount('#body')

</script>

</html>